<template>
  <ul class="singer_list">
    <li
      v-for="item in props.list"
      class="flex"
      :class="{
        singer_list_item: props.type == '1',
        streamer_list_item: props.type == '2',
      }"
    >
      <a>
        <img :src="item.url" alt="" />
      </a>
      <div class="detail">
        <div class="fs-14 bold singer_name">{{ item.name }}</div>
        <div class="fs-12 singer_desc">{{ item.desc }}</div>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
export default {
  name: '',
}
</script>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const props = defineProps<{
  type: string
  list: Array<{ name: string; desc: string; url: string }>
}>()
</script>

<style scoped lang="less">
.singer_list {
  padding-top: 15px;
}
.singer_list_item {
  background-color: #fafafa;
  border: 1px solid #e9e9e9;
  margin-bottom: 12px;
  overflow: hidden;

  .detail {
    padding-top: 10px;
    padding-left: 15px;

    min-width: 0;
    .singer_name {
      margin-bottom: 14px;
    }
  }
}
.singer_desc {
  text-overflow: ellipsis;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
}
.streamer_list_item {
  line-height: 20px;
  margin-bottom: 15px;
  .detail {
    margin-left: 10px;
    min-width: 0;
  }
  .singer_name {
    font-weight: normal;
    font-size: 12px;
  }
}
</style>
